<template>
  <div class="navbar">
    <div class="logo">
      <img src="../../assets/logo.png" alt="" />
    </div>
    <div>
      <p>
        <van-icon class="ipt-icon" name="search" />
        请输入内容
      </p>
    </div>
    <div>
      <img src="../../assets/default_img.jpg" alt="" @click="$router.push('/edit')" v-if="!imgUrl" />
      <img :src="imgUrl" alt="" @click="$router.push('/edit')" v-else />
      <p>下载APP</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: ''
    }
  },
  async mounted() {
    const res = await this.$http.get('/user/' + sessionStorage.getItem('id'))
    this.imgUrl = res.data[0].user_img
  }
}
</script>

<style lang="less" scoped>
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 12.5vw;
  background-color: #fff;
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25vw;
    img {
      width: 80%;
    }
  }
  div:nth-child(2) {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 2.222vw;
    p {
      position: relative;
      background-color: #f4f4f4;
      height: 6.667vw;
      line-height: 6.667vw;
      padding-left: 8.333vw;
      width: 90%;
      border-radius: 6.667vw;
      font-size: 3.889vw;
      color: #aaa;
      .ipt-icon {
        position: absolute;
        padding: 0;
        margin: 0;
        left: 2.778vw;
        top: 50%;
        transform: translate(0, -50%);
        color: #aaa;
      }
    }
  }
  div:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 6.667vw;
      height: 6.667vw;
    }
    p {
      padding: 1.3vw 2.7vw;
      margin: 0 2.222vw;
      background-color: #fb7299;
      color: #fff;
      border-radius: 1.389vw;
      font-size: 3.611vw;
    }
  }
}
</style>
